<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组织架构维护</title>
    <!-- 引入Element UI样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
            background-color: #f5f5f5;
            height: 100vh;
            overflow: hidden;
        }
        
        .container {
            height: 100vh;
            margin: 0;
            background-color: white;
            border-radius: 0;
            box-shadow: none;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }
        
        .header h1 {
            margin: 0 0 10px 0;
            font-size: 28px;
            font-weight: 300;
        }
        
        .header p {
            margin: 0;
            opacity: 0.9;
            font-size: 16px;
        }
        
        .main-content {
            display: flex;
            flex: 1;
            position: relative;
            overflow: hidden;
        }
        
        .left-panel {
            width: 300px;
            min-width: 200px;
            max-width: 500px;
            border-right: 1px solid #e9ecef;
            background-color: white;
            position: relative;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        
        .resize-handle {
            position: absolute;
            right: -2px;
            top: 0;
            bottom: 0;
            width: 4px;
            background-color: transparent;
            cursor: col-resize;
            z-index: 10;
            transition: background-color 0.2s;
        }
        
        .resize-handle:hover {
            background-color: #409eff;
        }
        
        .resize-handle.active {
            background-color: #409eff;
        }
        
        .right-panel {
            flex: 1;
            padding: 0;
            min-width: 300px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        
        .tree-header {
            padding: 15px 20px;
            background-color: #e6f7ff;
            border-bottom: 1px solid #e9ecef;
            font-weight: 600;
            color: #1890ff;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .view-switcher {
            margin-left: auto;
        }
        
        .tree-container {
            padding: 20px;
            flex: 1;
            overflow-y: auto;
            overflow-x: auto;
        }
        
        .info-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding: 15px 20px;
            border-bottom: 2px solid #e9ecef;
            background-color: white;
            position: sticky;
            top: 0;
            z-index: 10;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        
        .info-title {
            font-size: 20px;
            font-weight: 600;
            color: #2c3e50;
        }
        
        .action-buttons {
            display: flex;
            gap: 10px;
        }
        
        .info-form {
            max-width: 600px;
        }
        
        .panel {
            background: white;
            border-radius: 6px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
            overflow: hidden;
            border: 1px solid #e9ecef;
        }
        
        .panel:last-child {
            margin-bottom: 0;
        }
        
        .panel-header {
            background: #f5f7fa;
            padding: 12px 20px;
            border-bottom: 1px solid #e4e7ed;
            font-weight: 500;
            color: #303133;
            font-size: 14px;
        }
        
        .panel-body {
            padding: 20px;
        }
        
        .panel-body .el-table {
            width: 100% !important;
        }
        
        .form-section {
            margin-bottom: 25px;
        }
        
        .form-section h3 {
            color: #2c3e50;
            margin: 0 0 15px 0;
            font-size: 16px;
            font-weight: 500;
            border-left: 3px solid #409eff;
            padding-left: 10px;
        }
        
        .empty-state {
            text-align: center;
            padding: 60px 20px;
            color: #909399;
        }
        
        .empty-state i {
            font-size: 48px;
            margin-bottom: 20px;
            color: #dcdfe6;
        }
        
        .empty-state h3 {
            margin: 0 0 10px 0;
            font-size: 18px;
            color: #606266;
        }
        
        .empty-state p {
            margin: 0;
            font-size: 14px;
        }
        
        .node-type-badge {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
        }
        
        .node-type-country {
            background-color: #f0f9ff;
            color: #1890ff;
        }
        
        .node-type-division {
            background-color: #f6ffed;
            color: #52c41a;
        }
        
        .node-type-bu {
            background-color: #fff7e6;
            color: #fa8c16;
        }
        
        .tree-node-custom {
            display: flex;
            align-items: center;
            width: 100%;
        }
        
        .tree-node-info {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .staff-settings {
            padding: 10px 0;
        }
        
        .staff-category {
            text-align: center;
        }
        
        .staff-category h4 {
            margin: 0 0 10px 0;
            color: #606266;
            font-size: 14px;
            font-weight: 500;
        }
        
        .staff-settings-container {
            border-top: 1px solid #e4e7ed;
            padding-top: 20px;
        }
        
        .function-section {
            margin-bottom: 10px;
            padding: 2px;
            background: #f8f9fa;
            border-radius: 6px;
            border: 1px solid #e4e7ed;
        }
        
        .function-section:last-child {
            margin-bottom: 0;
        }
        
        .function-title {
            margin: 0 0 8px 0;
            color: #303133;
            font-size: 13px;
            font-weight: 600;
            border-left: 3px solid #409eff;
            padding-left: 6px;
        }
        
        .staff-category {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .staff-category h4 {
            margin: 0;
            color: #606266;
            font-size: 12px;
            font-weight: 500;
            white-space: nowrap;
            min-width: 70px;
        }
        
        /* 拖拽相关样式 */
        .el-tree-node.is-drop-inner > .el-tree-node__content {
            background-color: #f0f9ff;
            border: 1px dashed #409eff;
        }
        
        .el-tree-node__content:hover {
            background-color: #f5f7fa;
        }
        
        .el-tree-node.is-drop-prev > .el-tree-node__content {
            border-top: 2px solid #409eff;
        }
        
        .el-tree-node.is-drop-next > .el-tree-node__content {
            border-bottom: 2px solid #409eff;
        }
        
        /* 滚动条样式 */
        .right-content::-webkit-scrollbar,
        .tree-container::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        
        .right-content::-webkit-scrollbar-track,
        .tree-container::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 4px;
        }
        
        .right-content::-webkit-scrollbar-thumb,
        .tree-container::-webkit-scrollbar-thumb {
            background: #c1c1c1;
            border-radius: 4px;
        }
        
        .right-content::-webkit-scrollbar-thumb:hover,
        .tree-container::-webkit-scrollbar-thumb:hover {
            background: #a8a8a8;
        }
        
        /* 确保内容区域不会超出视口 */
        #app {
            height: 100vh;
            overflow: hidden;
        }
        
        /* 右侧内容区域 */
        .right-content {
            flex: 1;
            overflow-y: auto;
            overflow-x: auto;
            padding: 0 20px 20px 20px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="container">
            <!-- 顶部标题 -->
            <div class="header">
                <h1>组织架构维护</h1>
                <p>Organization Structure Management</p>
            </div>
            
            <!-- 主要内容区域 -->
            <div class="main-content">
                <!-- 左侧树形结构 -->
                <div class="left-panel" :style="{ width: leftPanelWidth + 'px' }">
                    <div class="tree-header">
                        <i class="el-icon-folder"></i> 组织架构树
                        <div class="view-switcher">
                            <el-radio-group v-model="currentView" size="mini" @change="onViewChange">
                                <el-radio-button label="china">中国区</el-radio-button>
                                <el-radio-button label="asia">亚洲区</el-radio-button>
                            </el-radio-group>
                        </div>
                    </div>
                    <div class="tree-container">
                        <el-tree
                            :data="sortedTreeData"
                            :props="treeProps"
                            node-key="id"
                            :expand-on-click-node="false"
                            :default-expand-all="true"
                            draggable
                            :allow-drop="allowDrop"
                            :allow-drag="allowDrag"
                            @node-drop="handleNodeDrop"
                            @node-click="handleNodeClick"
                            :render-content="renderTreeNode">
                        </el-tree>
                    </div>
                    <div class="resize-handle" 
                         @mousedown="startResize"
                         :class="{ active: isResizing }">
                    </div>
                </div>
                
                <!-- 右侧信息面板 -->
                <div class="right-panel">
                    <div v-if="selectedNode" class="right-content">
                        <div class="info-header">
                            <div class="info-title">
                                <span class="node-type-badge" :class="getNodeTypeClass(selectedNode.type)">
                                    {{ getNodeTypeName(selectedNode.type) }}
                                </span>
                                {{ selectedNode.name }}
                            </div>
                            <div class="action-buttons">
                                <el-button type="primary" size="small" @click="addChildNode(selectedNode)">
                                    <i class="el-icon-plus"></i> 添加子节点
                                </el-button>
                                <el-button type="primary" size="small" @click="editNode(selectedNode)">
                                    <i class="el-icon-edit"></i> 编辑
                                </el-button>
                                <el-button type="danger" size="small" @click="deleteNode(selectedNode)">
                                    <i class="el-icon-delete"></i> 删除
                                </el-button>
                            </div>
                        </div>
                        
                        <!-- 基本信息面板 -->
                        <div class="panel">
                            <div class="panel-header">
                                基本信息
                            </div>
                            <div class="panel-body">
                                <el-form :model="selectedNode" label-width="100px" disabled>
                                    <el-row :gutter="20">
                                        <el-col :span="12">
                                            <el-form-item label="名称">
                                                <el-input v-model="selectedNode.name"></el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="12">
                                            <el-form-item label="编码">
                                                <el-input v-model="selectedNode.code"></el-input>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row :gutter="20">
                                        <el-col :span="12">
                                            <el-form-item label="类型">
                                                <el-input :value="getNodeTypeName(selectedNode.type)" readonly></el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="12">
                                            <el-form-item label="状态">
                                                <el-tag :type="selectedNode.status === 'active' ? 'success' : 'danger'">
                                                    {{ selectedNode.status === 'active' ? '启用' : '禁用' }}
                                                </el-tag>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row :gutter="20">
                                        <el-col :span="12">
                                            <el-form-item label="亚洲区名称">
                                                <el-input v-model="selectedNode.asiaName" placeholder="请输入亚洲区名称"></el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="12" v-if="selectedNode.type === 'bu'">
                                            <el-form-item label="Location">
                                                <el-select v-model="selectedNode.location" placeholder="请选择Location" style="width: 100%">
                                                    <el-option label="Shanghai" value="Shanghai"></el-option>
                                                    <el-option label="Beijing" value="Beijing"></el-option>
                                                    <el-option label="Guangzhou" value="Guangzhou"></el-option>
                                                    <el-option label="Shenzhen" value="Shenzhen"></el-option>
                                                    <el-option label="Chengdu" value="Chengdu"></el-option>
                                                    <el-option label="Wuhan" value="Wuhan"></el-option>
                                                    <el-option label="Nanjing" value="Nanjing"></el-option>
                                                    <el-option label="Hangzhou" value="Hangzhou"></el-option>
                                                    <el-option label="Xi'an" value="Xi'an"></el-option>
                                                    <el-option label="Chongqing" value="Chongqing"></el-option>
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-form-item label="描述">
                                        <el-input type="textarea" v-model="selectedNode.description" rows="3"></el-input>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </div>
                        
                        <!-- 子节点管理面板 -->
                        <div class="panel" v-if="selectedNode.type !== 'bu'">
                            <div class="panel-header">
                                子节点管理
                            </div>
                            <div class="panel-body">
                                <div v-if="selectedNode.children && selectedNode.children.length > 0">
                                    <el-table :data="selectedNode.children" style="width: 100%">
                                        <el-table-column prop="name" label="名称" min-width="200">
                                            <template slot-scope="scope">
                                                <span class="node-type-badge" :class="getNodeTypeClass(scope.row.type)">
                                                    {{ getNodeTypeName(scope.row.type) }}
                                                </span>
                                                {{ scope.row.name }}
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="code" label="编码" min-width="150"></el-table-column>
                                        <el-table-column prop="location" label="Location" min-width="120" v-if="selectedNode.type === 'division'">
                                            <template slot-scope="scope">
                                                <span v-if="scope.row.type === 'bu'">{{ scope.row.location || '-' }}</span>
                                                <span v-else>-</span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="status" label="状态" min-width="100">
                                            <template slot-scope="scope">
                                                <el-tag :type="scope.row.status === 'active' ? 'success' : 'danger'">
                                                    {{ scope.row.status === 'active' ? '启用' : '禁用' }}
                                                </el-tag>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="操作" min-width="120">
                                            <template slot-scope="scope">
                                                <el-button type="text" size="small" @click="editChildNode(scope.row)">
                                                    编辑
                                                </el-button>
                                                <el-button type="text" size="small" @click="deleteChildNode(scope.row)">
                                                    删除
                                                </el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                                <div v-else>
                                    <el-empty description="暂无子节点"></el-empty>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 职能管理面板 -->
                        <div class="panel" v-if="selectedNode.type === 'bu'">
                            <div class="panel-header">
                                职能管理
                            </div>
                            <div class="panel-body">
                                <el-form label-width="100px">
                                    <el-form-item label="职能选择">
                                        <el-checkbox-group v-model="selectedNode.functions" @change="onFunctionsChange">
                                            <el-checkbox label="Default">Default</el-checkbox>
                                            <el-checkbox label="维修">维修</el-checkbox>
                                            <el-checkbox label="质量">质量</el-checkbox>
                                            <el-checkbox label="仓库">仓库</el-checkbox>
                                        </el-checkbox-group>
                                    </el-form-item>
                                </el-form>
                                
                                <!-- 填报人员设置 -->
                                <div v-if="selectedNode.functions && selectedNode.functions.length > 0" style="margin-top: 20px;">
                                    <div class="staff-settings-container">
                                        <div v-for="func in selectedNode.functions" :key="func" class="function-section">
                                            <h3 class="function-title">{{ func }}</h3>
                                            <div class="staff-settings">
                                                <el-row :gutter="20">
                                                    <el-col :span="8">
                                                        <div class="staff-category">
                                                            <h4>Permanent</h4>
                                                            <el-input 
                                                                v-model="getStaffSettings(func, 'permanent')"
                                                                placeholder="请输入填报人员"
                                                                size="small"
                                                                style="flex: 1;">
                                                            </el-input>
                                                        </div>
                                                    </el-col>
                                                    <el-col :span="8">
                                                        <div class="staff-category">
                                                            <h4>Overtime/FTE</h4>
                                                            <el-input 
                                                                v-model="getStaffSettings(func, 'overtime')"
                                                                placeholder="请输入填报人员"
                                                                size="small"
                                                                style="flex: 1;">
                                                            </el-input>
                                                        </div>
                                                    </el-col>
                                                    <el-col :span="8">
                                                        <div class="staff-category">
                                                            <h4>Temporary</h4>
                                                            <el-input 
                                                                v-model="getStaffSettings(func, 'temporary')"
                                                                placeholder="请输入填报人员"
                                                                size="small"
                                                                style="flex: 1;">
                                                            </el-input>
                                                        </div>
                                                    </el-col>
                                                </el-row>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div v-else class="empty-state">
                        <i class="el-icon-folder-opened"></i>
                        <h3>请选择组织节点</h3>
                        <p>点击左侧树形结构中的节点查看详细信息</p>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 节点编辑对话框 -->
        <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="600px" @close="onDialogClose">
            <el-form :model="editingNode" :rules="formRules" ref="nodeForm" label-width="100px">
                <el-form-item label="名称" prop="name">
                    <el-input v-model="editingNode.name" placeholder="请输入节点名称"></el-input>
                </el-form-item>
                <el-form-item label="编码" prop="code">
                    <el-input v-model="editingNode.code" placeholder="请输入节点编码"></el-input>
                </el-form-item>
                <el-form-item label="类型" prop="type">
                    <el-select v-model="editingNode.type" placeholder="请选择节点类型" style="width: 100%">
                        <el-option label="Country" value="country"></el-option>
                        <el-option label="Division" value="division"></el-option>
                        <el-option label="BU" value="bu"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="亚洲区名称">
                    <el-input v-model="editingNode.asiaName" placeholder="请输入亚洲区名称"></el-input>
                </el-form-item>
                <el-form-item label="Location" v-if="editingNode.type === 'bu'">
                    <el-select v-model="editingNode.location" placeholder="请选择Location" style="width: 100%">
                        <el-option label="Shanghai" value="Shanghai"></el-option>
                        <el-option label="Beijing" value="Beijing"></el-option>
                        <el-option label="Guangzhou" value="Guangzhou"></el-option>
                        <el-option label="Shenzhen" value="Shenzhen"></el-option>
                        <el-option label="Chengdu" value="Chengdu"></el-option>
                        <el-option label="Wuhan" value="Wuhan"></el-option>
                        <el-option label="Nanjing" value="Nanjing"></el-option>
                        <el-option label="Hangzhou" value="Hangzhou"></el-option>
                        <el-option label="Xi'an" value="Xi'an"></el-option>
                        <el-option label="Chongqing" value="Chongqing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-radio-group v-model="editingNode.status">
                        <el-radio label="active">启用</el-radio>
                        <el-radio label="inactive">禁用</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="描述">
                    <el-input type="textarea" v-model="editingNode.description" rows="3" placeholder="请输入节点描述"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="saveNode">确定</el-button>
            </div>
        </el-dialog>
    </div>

    <!-- 引入Vue.js -->
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <!-- 引入Element UI -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    treeData: [],
                    selectedNode: null,
                    editingNode: {},
                    dialogVisible: false,
                    dialogTitle: '',
                    isEdit: false,
                    leftPanelWidth: 300,
                    isResizing: false,
                    currentView: 'china', // 默认中国区视图
                    parentNodeForNewChild: null, // 用于保存新子节点的父节点引用
                    treeProps: {
                        children: 'children',
                        label: this.getNodeDisplayName
                    },
                    formRules: {
                        name: [
                            { required: true, message: '请输入节点名称', trigger: 'blur' }
                        ],
                        code: [
                            { required: true, message: '请输入节点编码', trigger: 'blur' }
                        ],
                        type: [
                            { required: true, message: '请选择节点类型', trigger: 'change' }
                        ],
                        status: [
                            { required: true, message: '请选择节点状态', trigger: 'change' }
                        ]
                    }
                }
            },
            mounted() {
                this.loadTreeData();
                // 确保树属性正确初始化
                this.treeProps = {
                    children: 'children',
                    label: this.getNodeDisplayName
                };
            },
            computed: {
                // 根据当前视图返回排序后的树数据
                sortedTreeData() {
                    return this.sortTreeDataByView(JSON.parse(JSON.stringify(this.treeData)));
                }
            },
            methods: {
                loadTreeData() {
                    // 模拟从本地存储加载数据
                    const savedData = localStorage.getItem('orgTreeData');
                    if (savedData) {
                        this.treeData = JSON.parse(savedData);
                        // 确保所有BU节点都有functions属性
                        this.ensureBUFunctions(this.treeData);
                    } else {
                        // 初始化默认数据
                        this.treeData = [
                            {
                                id: '1',
                                name: '中国',
                                code: 'CN',
                                type: 'country',
                                status: 'active',
                                description: '中国区域',
                                asiaName: 'China',
                                order_num: 1,
                                asia_order_num: 1,
                                children: [
                                    {
                                        id: '1-1',
                                        name: '制造事业部',
                                        code: 'MFG',
                                        type: 'division',
                                        status: 'active',
                                        description: '制造相关业务',
                                        asiaName: 'Manufacturing Division',
                                        order_num: 1,
                                        asia_order_num: 1,
                                        children: [
                                            {
                                                                                            id: '1-1-1',
                                            name: '生产BU',
                                            code: 'PROD',
                                            type: 'bu',
                                            status: 'active',
                                            description: '生产业务单元',
                                            asiaName: 'Production BU',
                                            order_num: 1,
                                            asia_order_num: 1,
                                            children: [],
                                            functions: ['Default'],
                                            location: ''
                                            },
                                            {
                                                                                            id: '1-1-2',
                                            name: '设备BU',
                                            code: 'EQUIP',
                                            type: 'bu',
                                            status: 'active',
                                            description: '设备管理业务单元',
                                            asiaName: 'Equipment BU',
                                            order_num: 2,
                                            asia_order_num: 2,
                                            children: [],
                                            functions: ['Default'],
                                            location: ''
                                            },
                                            {
                                                                                            id: '1-1-3',
                                            name: '工艺BU',
                                            code: 'TECH',
                                            type: 'bu',
                                            status: 'active',
                                            description: '工艺技术业务单元',
                                            asiaName: 'Technology BU',
                                            order_num: 3,
                                            asia_order_num: 3,
                                            children: [],
                                            functions: ['Default'],
                                            location: ''
                                            },
                                            {
                                                                                            id: '1-1-4',
                                            name: '维护BU',
                                            code: 'MAINT',
                                            type: 'bu',
                                            status: 'active',
                                            description: '设备维护业务单元',
                                            asiaName: 'Maintenance BU',
                                            order_num: 4,
                                            asia_order_num: 4,
                                            children: [],
                                            functions: ['Default'],
                                            location: ''
                                            }
                                        ]
                                    },
                                    {
                                        id: '1-2',
                                        name: '服务事业部',
                                        code: 'SVC',
                                        type: 'division',
                                        status: 'active',
                                        description: '服务相关业务',
                                        asiaName: 'Service Division',
                                        order_num: 2,
                                        asia_order_num: 2,
                                        children: [
                                            {
                                                                                            id: '1-2-1',
                                            name: '客户服务BU',
                                            code: 'CS',
                                            type: 'bu',
                                            status: 'active',
                                            description: '客户服务业务单元',
                                            asiaName: 'Customer Service BU',
                                            order_num: 1,
                                            asia_order_num: 1,
                                            children: [],
                                            functions: ['Default'],
                                            location: ''
                                            },
                                            {
                                                                                            id: '1-2-2',
                                            name: '技术支持BU',
                                            code: 'TS',
                                            type: 'bu',
                                            status: 'active',
                                            description: '技术支持业务单元',
                                            asiaName: 'Technical Support BU',
                                            order_num: 2,
                                            asia_order_num: 2,
                                            children: [],
                                            functions: ['Default'],
                                            location: ''
                                            },
                                            {
                                                                                            id: '1-2-3',
                                            name: '培训BU',
                                            code: 'TRAIN',
                                            type: 'bu',
                                            status: 'active',
                                            description: '培训业务单元',
                                            asiaName: 'Training BU',
                                            order_num: 3,
                                            asia_order_num: 3,
                                            children: [],
                                            functions: ['Default'],
                                            location: ''
                                            }
                                        ]
                                    },
                                    {
                                        id: '1-3',
                                        name: '研发事业部',
                                        code: 'R&D',
                                        type: 'division',
                                        status: 'active',
                                        description: '研发相关业务',
                                        asiaName: 'R&D Division',
                                        order_num: 3,
                                        asia_order_num: 3,
                                        children: [
                                            {
                                                                                            id: '1-3-1',
                                            name: '产品研发BU',
                                            code: 'PD',
                                            type: 'bu',
                                            status: 'active',
                                            description: '产品研发业务单元',
                                            asiaName: 'Product Development BU',
                                            order_num: 1,
                                            asia_order_num: 1,
                                            children: [],
                                            functions: ['Default'],
                                            location: ''
                                            },
                                            {
                                                                                            id: '1-3-2',
                                            name: '技术研发BU',
                                            code: 'TR',
                                            type: 'bu',
                                            status: 'active',
                                            description: '技术研发业务单元',
                                            asiaName: 'Technology Research BU',
                                            order_num: 2,
                                            asia_order_num: 2,
                                            children: [],
                                            functions: ['Default'],
                                            location: ''
                                            },
                                            {
                                                                                            id: '1-3-3',
                                            name: '创新BU',
                                            code: 'INNOV',
                                            type: 'bu',
                                            status: 'active',
                                            description: '创新业务单元',
                                            asiaName: 'Innovation BU',
                                            order_num: 3,
                                            asia_order_num: 3,
                                            children: [],
                                            functions: ['Default'],
                                            location: ''
                                            },
                                            {
                                                                                            id: '1-3-4',
                                            name: '测试BU',
                                            code: 'TEST',
                                            type: 'bu',
                                            status: 'active',
                                            description: '测试业务单元',
                                            asiaName: 'Testing BU',
                                            order_num: 4,
                                            asia_order_num: 4,
                                            children: [],
                                            functions: ['Default'],
                                            location: ''
                                            },
                                            {
                                                                                            id: '1-3-5',
                                            name: '质量保证BU',
                                            code: 'QA',
                                            type: 'bu',
                                            status: 'active',
                                            description: '质量保证业务单元',
                                            asiaName: 'Quality Assurance BU',
                                            order_num: 5,
                                            asia_order_num: 5,
                                            children: [],
                                            functions: ['Default'],
                                            location: ''
                                            }
                                        ]
                                    },
                                    {
                                        id: '1-4',
                                        name: '销售事业部',
                                        code: 'SALES',
                                        type: 'division',
                                        status: 'active',
                                        description: '销售相关业务',
                                        asiaName: 'Sales Division',
                                        order_num: 4,
                                        asia_order_num: 4,
                                        children: [
                                            {
                                                                                            id: '1-4-1',
                                            name: '国内销售BU',
                                            code: 'DOM',
                                            type: 'bu',
                                            status: 'active',
                                            description: '国内销售业务单元',
                                            asiaName: 'Domestic Sales BU',
                                            order_num: 1,
                                            asia_order_num: 1,
                                            children: [],
                                            functions: ['Default'],
                                            location: ''
                                            },
                                            {
                                                                                            id: '1-4-2',
                                            name: '国际销售BU',
                                            code: 'INTL',
                                            type: 'bu',
                                            status: 'active',
                                            description: '国际销售业务单元',
                                            asiaName: 'International Sales BU',
                                            order_num: 2,
                                            asia_order_num: 2,
                                            children: [],
                                            functions: ['Default'],
                                            location: ''
                                            },
                                            {
                                                                                            id: '1-4-3',
                                            name: '渠道BU',
                                            code: 'CHANNEL',
                                            type: 'bu',
                                            status: 'active',
                                            description: '渠道管理业务单元',
                                            asiaName: 'Channel BU',
                                            order_num: 3,
                                            asia_order_num: 3,
                                            children: [],
                                            functions: ['Default'],
                                            location: ''
                                            },
                                            {
                                                                                            id: '1-4-4',
                                            name: '大客户BU',
                                            code: 'KA',
                                            type: 'bu',
                                            status: 'active',
                                            description: '大客户业务单元',
                                            asiaName: 'Key Account BU',
                                            order_num: 4,
                                            asia_order_num: 4,
                                            children: [],
                                            functions: ['Default'],
                                            location: ''
                                            },
                                            {
                                                                                            id: '1-4-5',
                                            name: '市场BU',
                                            code: 'MKT',
                                            type: 'bu',
                                            status: 'active',
                                            description: '市场营销业务单元',
                                            asiaName: 'Marketing BU',
                                            order_num: 5,
                                            asia_order_num: 5,
                                            children: [],
                                            functions: ['Default'],
                                            location: ''
                                            },
                                            {
                                                                                            id: '1-4-6',
                                            name: '商务BU',
                                            code: 'BIZ',
                                            type: 'bu',
                                            status: 'active',
                                            description: '商务业务单元',
                                            asiaName: 'Business BU',
                                            order_num: 6,
                                            asia_order_num: 6,
                                            children: [],
                                            functions: ['Default'],
                                            location: ''
                                            }
                                        ]
                                    },
                                    {
                                        id: '1-5',
                                        name: '运营事业部',
                                        code: 'OPS',
                                        type: 'division',
                                        status: 'active',
                                        description: '运营相关业务',
                                        asiaName: 'Operations Division',
                                        order_num: 5,
                                        asia_order_num: 5,
                                        children: [
                                            {
                                                                                            id: '1-5-1',
                                            name: '供应链BU',
                                            code: 'SCM',
                                            type: 'bu',
                                            status: 'active',
                                            description: '供应链管理业务单元',
                                            asiaName: 'Supply Chain BU',
                                            order_num: 1,
                                            asia_order_num: 1,
                                            children: [],
                                            functions: ['Default'],
                                            location: ''
                                            },
                                            {
                                                                                            id: '1-5-2',
                                            name: '物流BU',
                                            code: 'LOG',
                                            type: 'bu',
                                            status: 'active',
                                            description: '物流业务单元',
                                            asiaName: 'Logistics BU',
                                            order_num: 2,
                                            asia_order_num: 2,
                                            children: [],
                                            functions: ['Default'],
                                            location: ''
                                            },
                                            {
                                                                                            id: '1-5-3',
                                            name: '仓储BU',
                                            code: 'WARE',
                                            type: 'bu',
                                            status: 'active',
                                            description: '仓储管理业务单元',
                                            asiaName: 'Warehouse BU',
                                            order_num: 3,
                                            asia_order_num: 3,
                                            children: [],
                                            functions: ['Default'],
                                            location: ''
                                            },
                                            {
                                                                                            id: '1-5-4',
                                            name: '采购BU',
                                            code: 'PROC',
                                            type: 'bu',
                                            status: 'active',
                                            description: '采购管理业务单元',
                                            asiaName: 'Procurement BU',
                                            order_num: 4,
                                            asia_order_num: 4,
                                            children: [],
                                            functions: ['Default'],
                                            location: ''
                                            }
                                        ]
                                    }
                                ]
                            }
                        ];
                        this.saveTreeData();
                    }
                },
                
                getNodeDisplayName(data) {
                    // 根据当前视图返回对应的名称
                    if (this.currentView === 'china') {
                        return data.name || '';
                    } else if (this.currentView === 'asia') {
                        return data.asiaName || data.name || '';
                    }
                    return data.name || '';
                },
                
                onViewChange() {
                    // 视图切换时，计算属性会自动重新计算排序
                    // 不需要额外的操作，Vue会自动响应currentView的变化
                },
                
                // 根据当前视图对节点进行排序
                sortNodesByView(nodes) {
                    if (!nodes || !Array.isArray(nodes)) return;
                    
                    // 根据当前视图选择排序字段
                    const sortField = this.currentView === 'china' ? 'order_num' : 'asia_order_num';
                    
                    // 对当前层级节点进行排序
                    nodes.sort((a, b) => {
                        const orderA = a[sortField] || 1;
                        const orderB = b[sortField] || 1;
                        return orderA - orderB;
                    });
                    
                    // 递归对子节点进行排序
                    nodes.forEach(node => {
                        if (node.children && node.children.length > 0) {
                            this.sortNodesByView(node.children);
                        }
                    });
                },
                
                // 根据当前视图对树数据进行排序（返回新的排序后的数据）
                sortTreeDataByView(treeData) {
                    if (!treeData || !Array.isArray(treeData)) return [];
                    
                    // 深拷贝数据以避免修改原始数据
                    const sortedData = JSON.parse(JSON.stringify(treeData));
                    
                    // 根据当前视图选择排序字段
                    const sortField = this.currentView === 'china' ? 'order_num' : 'asia_order_num';
                    
                    // 递归排序函数
                    const sortNodes = (nodes) => {
                        if (!nodes || !Array.isArray(nodes)) return;
                        
                        // 对当前层级节点进行排序
                        nodes.sort((a, b) => {
                            const orderA = a[sortField] || 1;
                            const orderB = b[sortField] || 1;
                            return orderA - orderB;
                        });
                        
                        // 递归对子节点进行排序
                        nodes.forEach(node => {
                            if (node.children && node.children.length > 0) {
                                sortNodes(node.children);
                            }
                        });
                    };
                    
                    sortNodes(sortedData);
                    return sortedData;
                },
                
                saveTreeData() {
                    localStorage.setItem('orgTreeData', JSON.stringify(this.treeData));
                },
                
                ensureBUFunctions(nodes) {
                    nodes.forEach(node => {
                        if (node.type === 'bu' && !node.functions) {
                            this.$set(node, 'functions', ['Default']);
                        }
                        if (node.type === 'bu' && !node.staffSettings) {
                            this.$set(node, 'staffSettings', {});
                        }
                        // 确保所有节点都有asiaName
                        if (!node.asiaName) {
                            this.$set(node, 'asiaName', node.name);
                        }
                        // 确保BU节点有location属性
                        if (node.type === 'bu' && !node.location) {
                            this.$set(node, 'location', '');
                        }
                        // 确保所有节点都有排序字段
                        if (typeof node.order_num === 'undefined') {
                            this.$set(node, 'order_num', 1);
                        }
                        if (typeof node.asia_order_num === 'undefined') {
                            this.$set(node, 'asia_order_num', 1);
                        }
                        if (node.children && node.children.length > 0) {
                            this.ensureBUFunctions(node.children);
                        }
                    });
                },
                
                onFunctionsChange(functions) {
                    // 当职能选择改变时，确保有对应的staffSettings
                    if (this.selectedNode && this.selectedNode.type === 'bu') {
                        if (!this.selectedNode.staffSettings) {
                            this.$set(this.selectedNode, 'staffSettings', {});
                        }
                        // 为每个选中的职能初始化staffSettings
                        functions.forEach(func => {
                            if (!this.selectedNode.staffSettings[func]) {
                                this.$set(this.selectedNode.staffSettings, func, {
                                    permanent: '',
                                    overtime: '',
                                    temporary: ''
                                });
                            }
                        });
                    }
                },
                
                getStaffSettings(functionName, category) {
                    if (this.selectedNode && 
                        this.selectedNode.staffSettings && 
                        this.selectedNode.staffSettings[functionName]) {
                        return this.selectedNode.staffSettings[functionName][category] || '';
                    }
                    return '';
                },
                
                handleNodeClick(data) {
                    this.selectedNode = data;
                    // 确保BU节点有functions属性
                    if (data.type === 'bu' && !data.functions) {
                        this.$set(data, 'functions', ['Default']);
                    }
                    // 确保BU节点有staffSettings属性
                    if (data.type === 'bu' && !data.staffSettings) {
                        this.$set(data, 'staffSettings', {});
                    }
                    // 确保所有节点都有asiaName
                    if (!data.asiaName) {
                        this.$set(data, 'asiaName', data.name);
                    }
                    // 确保BU节点有location属性
                    if (data.type === 'bu' && !data.location) {
                        this.$set(data, 'location', '');
                    }
                    // 确保所有节点都有排序字段
                    if (typeof data.order_num === 'undefined') {
                        this.$set(data, 'order_num', 1);
                    }
                    if (typeof data.asia_order_num === 'undefined') {
                        this.$set(data, 'asia_order_num', 1);
                    }
                },
                
                renderTreeNode(h, { node, data, store }) {
                    return h('div', {
                        class: 'tree-node-custom'
                    }, [
                        h('div', {
                            class: 'tree-node-info'
                        }, [
                            h('span', {
                                class: 'node-type-badge',
                                class: this.getNodeTypeClass(data.type)
                            }, this.getNodeTypeName(data.type)),
                            h('span', this.getNodeDisplayName(data))
                        ])
                    ]);
                },
                
                getNodeTypeClass(type) {
                    const classes = {
                        'country': 'node-type-country',
                        'division': 'node-type-division',
                        'bu': 'node-type-bu'
                    };
                    return classes[type] || '';
                },
                
                getNodeTypeName(type) {
                    const names = {
                        'country': 'Country',
                        'division': 'Division',
                        'bu': 'BU'
                    };
                    return names[type] || type;
                },
                
                editNode(node) {
                    this.editingNode = JSON.parse(JSON.stringify(node));
                    this.dialogTitle = '编辑节点';
                    this.isEdit = true;
                    this.dialogVisible = true;
                },
                
                addChildNode(parentNode) {
                    const nextType = this.getNextType(parentNode.type);
                    this.editingNode = {
                        id: Date.now().toString(),
                        name: '',
                        code: '',
                        type: nextType,
                        status: 'active',
                        description: '',
                        asiaName: '',
                        order_num: 1,
                        asia_order_num: 1,
                        location: nextType === 'bu' ? '' : undefined,
                        children: [],
                        functions: nextType === 'bu' ? ['Default'] : [],
                        staffSettings: nextType === 'bu' ? {
                            'Default': {
                                permanent: '',
                                overtime: '',
                                temporary: ''
                            }
                        } : {}
                    };
                    this.dialogTitle = '添加子节点';
                    this.isEdit = false;
                    this.dialogVisible = true;
                    // 保存父节点引用
                    this.parentNodeForNewChild = parentNode;
                },
                
                getNextType(currentType) {
                    const typeOrder = ['country', 'division', 'bu'];
                    const currentIndex = typeOrder.indexOf(currentType);
                    return currentIndex < typeOrder.length - 1 ? typeOrder[currentIndex + 1] : 'bu';
                },
                
                deleteNode(node) {
                    this.$confirm('确定要删除该节点吗？删除后将无法恢复。', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.removeNodeFromTree(this.treeData, node.id);
                        // 更新排序字段
                        this.updateOrderNumbers(this.treeData);
                        this.saveTreeData();
                        this.selectedNode = null;
                        // 强制更新树组件
                        this.$nextTick(() => {
                            this.$forceUpdate();
                        });
                        this.$message.success('删除成功');
                    }).catch(() => {
                        this.$message.info('已取消删除');
                    });
                },
                
                removeNodeFromTree(tree, nodeId) {
                    for (let i = 0; i < tree.length; i++) {
                        if (tree[i].id === nodeId) {
                            // 使用Vue的响应式删除
                            this.$delete(tree, i);
                            return true;
                        }
                        if (tree[i].children && this.removeNodeFromTree(tree[i].children, nodeId)) {
                            return true;
                        }
                    }
                    return false;
                },
                
                saveNode() {
                    this.$refs.nodeForm.validate((valid) => {
                        if (valid) {
                            if (this.isEdit) {
                                // 更新现有节点
                                this.updateNodeInTree(this.treeData, this.editingNode);
                                // 强制更新树组件
                                this.$nextTick(() => {
                                    this.$forceUpdate();
                                });
                            } else {
                                // 添加新节点
                                if (this.parentNodeForNewChild) {
                                    if (!this.parentNodeForNewChild.children) {
                                        this.$set(this.parentNodeForNewChild, 'children', []);
                                    }
                                    this.parentNodeForNewChild.children.push(this.editingNode);
                                    this.parentNodeForNewChild = null; // 清除引用
                                } else {
                                    this.treeData.push(this.editingNode);
                                }
                                // 更新排序字段
                                this.updateOrderNumbers(this.treeData);
                            }
                            
                            this.saveTreeData();
                            this.dialogVisible = false;
                            this.$message.success(this.isEdit ? '更新成功' : '添加成功');
                        }
                    });
                },
                
                updateNodeInTree(tree, updatedNode) {
                    for (let i = 0; i < tree.length; i++) {
                        if (tree[i].id === updatedNode.id) {
                            // 使用Vue的响应式更新
                            Object.keys(updatedNode).forEach(key => {
                                this.$set(tree[i], key, updatedNode[key]);
                            });
                            return true;
                        }
                        if (tree[i].children && this.updateNodeInTree(tree[i].children, updatedNode)) {
                            return true;
                        }
                    }
                    return false;
                },
                
                viewChildNode(node) {
                    this.selectedNode = node;
                },
                
                editChildNode(node) {
                    this.editNode(node);
                },
                
                // 监听编辑对话框的关闭，确保数据同步
                onDialogClose() {
                    if (this.isEdit && this.selectedNode) {
                        // 重新选择当前节点以刷新显示
                        const currentNode = this.selectedNode;
                        this.selectedNode = null;
                        this.$nextTick(() => {
                            this.selectedNode = currentNode;
                        });
                    }
                    // 清除父节点引用
                    this.parentNodeForNewChild = null;
                },
                
                deleteChildNode(node) {
                    this.deleteNode(node);
                },
                
                // 拖拽相关方法
                allowDrag(node) {
                    // 只允许拖拽Division和BU节点
                    return node.data.type === 'division' || node.data.type === 'bu';
                },
                
                allowDrop(draggingNode, dropNode, type) {
                    // 防止拖拽到自己或自己的子节点
                    if (draggingNode === dropNode) {
                        return false;
                    }
                    
                    // 检查是否拖拽到自己的子节点
                    let parent = dropNode.parent;
                    while (parent && parent.data) {
                        if (parent.data.id === draggingNode.data.id) {
                            return false;
                        }
                        parent = parent.parent;
                    }
                    
                    if (type === 'prev' || type === 'next') {
                        // 同级拖拽：只能在同一父节点下拖拽
                        return draggingNode.parent === dropNode.parent;
                    } else if (type === 'inner') {
                        // 拖拽到父节点内部：只能拖拽到合适的父节点
                        if (draggingNode.data.type === 'division') {
                            // Division只能拖拽到Country下
                            return dropNode.data.type === 'country';
                        } else if (draggingNode.data.type === 'bu') {
                            // BU只能拖拽到Division下
                            return dropNode.data.type === 'division';
                        }
                    }
                    return false;
                },
                
                handleNodeDrop(draggingNode, dropNode, dropType) {
                    // 处理节点拖拽完成事件
                    // 注意：拖拽操作是基于原始treeData进行的，Element UI会自动更新原始数据
                    // 更新排序字段
                    this.updateOrderNumbers(this.treeData);
                    this.saveTreeData();
                    this.$message.success('拖拽排序成功');
                },
                
                // 更新所有节点的排序字段（只更新当前视图的排序字段）
                updateOrderNumbers(nodes, parentId = 'root') {
                    if (!nodes || !Array.isArray(nodes)) return;
                    
                    // 根据当前视图选择排序字段
                    const sortField = this.currentView === 'china' ? 'order_num' : 'asia_order_num';
                    
                    // 为当前层级的每个节点设置排序号（只更新当前视图的排序字段）
                    nodes.forEach((node, index) => {
                        this.$set(node, sortField, index + 1);
                    });
                    
                    // 递归更新子节点
                    nodes.forEach(node => {
                        if (node.children && node.children.length > 0) {
                            this.updateOrderNumbers(node.children, node.id);
                        }
                    });
                },
                
                startResize(e) {
                    this.isResizing = true;
                    const startX = e.clientX;
                    const startWidth = this.leftPanelWidth;
                    
                    const handleMouseMove = (e) => {
                        const deltaX = e.clientX - startX;
                        const newWidth = startWidth + deltaX;
                        
                        // 限制最小和最大宽度
                        if (newWidth >= 200 && newWidth <= 500) {
                            this.leftPanelWidth = newWidth;
                        }
                    };
                    
                    const handleMouseUp = () => {
                        this.isResizing = false;
                        document.removeEventListener('mousemove', handleMouseMove);
                        document.removeEventListener('mouseup', handleMouseUp);
                    };
                    
                    document.addEventListener('mousemove', handleMouseMove);
                    document.addEventListener('mouseup', handleMouseUp);
                }
            }
        });
    </script>
</body>
</html> 